<template>
    <!-- 配置计算公式 -->
    <el-drawer :size="dialogWidth" :title="configureTitle" v-model="configureOpen" append-to-body
               :modal="false" @close="close">
        <div>
            <el-form>
                <el-button type="primary" @click="addFormula()">新增步骤行</el-button>
                <el-button type="warning" @click="delFormula()" v-show="this.items.length!=1">
                    删除步骤
                </el-button>
            </el-form>
            <el-form :inline="true" :rules="rules" v-for="item in items">
                <el-form-item label="操作对象:" style="margin-left: 15px">
                    <el-select v-model="item.numberA" placeholder="选择操作对象">
                        <el-option
                                v-for="item in numberAs"
                                :key="item.value"
                                :label="item.txt"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="操作:">
                    <el-select v-model="item.operator" placeholder="选择操作">
                        <el-option
                                v-for="item in operators"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择数值:">
                    <el-input-number v-model="item.numberB" placeholder="请输入数值"></el-input-number>
                </el-form-item>
            </el-form>
        </div>
        <div align="center">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-drawer>
</template>

<script>
    import {getParseAttributeFormulaList} from '/src/api/driver/formula'

    export default {
        name: "configure",
        emits: ['configureStatusChanged'],
        props: {
            //要解析的属性ID
            configureAttributeId: Number,
            //标题
            configureTitle: String,
            //显隐
            configureOpen: Boolean,
        },
        data() {
            return {
                operators: [],
                numberAs: [],
                numberBs: [],
                dialogWidth: '58%',
                queryParams: {
                    attributeId: ''
                },
                items: [],
                rules: [],
            }
        },
        computed: {
            //监测页面开关
            monitorOpenStatus() {
                return this.configureOpen
            },
        },
        watch: {
            monitorOpenStatus() {
                this.queryParams.attributeId = this.configureAttributeId
                this.init()
            }
        },
        created() {
            this.operators = ["r进制转10进制", "10进制转r进制", "+", "-", "*", "/"];
            this.numberAs = [{txt: "当前数值", value: "this"}, {txt: "上一步结果值", value: "result"}];
        },
        methods: {
            //初始化
            init() {
                this.getAgreementModelListByParam()
            },
            //查询模型列表
            getAgreementModelListByParam() {
                getParseAttributeFormulaList(this.queryParams).then(res => {
                    this.items = res.data
                })
            },
            //提交
            submitForm() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        //保存信息

                    }
                })
            },
            addFormula() {
                const txtObj = {
                    operator: '',
                    numberA: '',
                    numberB: '',
                };
                this.items.push(txtObj);
            },
            delFormula() {
                this.items.pop()
            },
            //取消
            cancel() {
                this.$emit('configureStatusChanged', false)
            },
            //关闭
            close() {
                this.$emit('configureStatusChanged', false)
            },
        },
    }
</script>

<style scoped>

</style>
